<template>
    <div class="info_page">
        <!-- 导航 开始 -->
        <nav-bar title="个人信息">
            <div class="" slot="right" @click="saveAvatar">保存</div>
        </nav-bar>
        <!-- 导航 end -->


        <van-cell-group>
            <van-cell class="van_cell" title="头像" title-class="cell_title" is-link center>
                <div class="avatar">
                    <!-- <img src="@/assets/images/avatar.png" class="img" alt=""> -->
                    <van-uploader class="van_uploader" ref="imageUploader" :after-read="afterRead">
                        <li-image :src="userInfo.avatar" class="img" v-if="userInfo.avatar"></li-image>
                        <!-- <img src="@/assets/images/report/upload.png" class="upload_img" alt="" v-else> -->
                        <div class="upload_inner" v-else></div>
                    </van-uploader>
                </div>
            </van-cell>
            <van-cell class="van_cell" title="昵称" title-class="cell_title" is-link :value="userInfo.username" to="/my/nickname" />
            <van-cell class="van_cell" title="手机" title-class="cell_title" is-link :value="userInfo.phone" to="/my/phone" />
            <van-cell class="van_cell" title="密码" title-class="cell_title" is-link value="修改" to="/my/password" />
        </van-cell-group>


        <div class="btn_group">
            <button class="btn" @click="logout">退出登录</button>
        </div>

    </div>
</template>
<script>
import { Cell, CellGroup, Dialog, Uploader } from 'vant';
import { LOGOUT_BY_PASSWORD, UPLOAD_FILE_INFO, GET_PERSONAL_INFO, SAVE_PERSONAL_AVATAR } from '@/http/interface'
import { showToast } from '../../utils/utils';
export default {
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Uploader.name]: Uploader
    },
    data() {
        return {
            userInfo: {},
            $axios: null,
            $cookies: null
        }
    },
    async asyncData({ $cookies, $axios }) {
        //let userInfo = $cookies.get('user')
        let res = await $axios.get(GET_PERSONAL_INFO)
        let userInfo = res.data || {}
        return { userInfo, $axios, $cookies }
    },
    created() {
        console.log(this.userInfo)
    },
    methods: {
        // 退出登录
        logout() {
            let _this = this
            Dialog.confirm({
                title: '提示',
                message: '确定退出登录吗？',
            }).then(() => {
                _this.$axios.get(LOGOUT_BY_PASSWORD).then(res => {
                    if (res.code == 200) {
                        _this.$cookies.remove('token')
                        _this.$cookies.remove('user')
                        _this.$router.push({ path: '/my' })
                    }
                })
            })
        },

        // 上传图片
        async afterRead(response) {
            console.log(response)
            let file = response.file
            let form = new FormData()
            form.append('file', file)
            let res = await this.$axios.post(UPLOAD_FILE_INFO, form)
            console.log(res)
            if (res.code == 200) {
                this.$set(this.userInfo, 'avatar', res.data)
            }
        },

        // 保存头像
        async saveAvatar() {
            let o = this.userInfo;
            if (!o.avatar) {
                return false;
            }
            let res = await this.$axios.post(SAVE_PERSONAL_AVATAR, { avatar: o.avatar })
            if (res.code == 200) {
                showToast({
                    message: '保存成功',
                    type: 'success'
                })
            }
        }

    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/my/info.less';
</style>